<template>
    <a-layout class="layout-admin">
        <a-layout-sider hide-trigger collapsible :collapsed="collapsed">
            <div style="text-align:center;">
                <a-avatar :style="{ backgroundColor: '#14a9f8',margin: '5px'}">{{username}}</a-avatar>
            </div>
            <a-menu :default-selected-keys="['1']" :style="{ width: '100%' }" @menu-item-click="onClickMenuItem">
                <a-menu-item key="index">
                    <icon-dashboard />
                    控制台
                </a-menu-item>
                <a-menu-item key="vmanage">
                    <icon-file-video />
                    视频管理
                </a-menu-item>
                <a-menu-item key="vlmanage">
                    <icon-file />
                    链接管理
                </a-menu-item>
                <a-menu-item key="armanage">
                    <icon-file />
                    年评管理
                </a-menu-item>
                <a-menu-item key="collect">
                    <icon-cloud-download />
                    视频采集
                </a-menu-item>
            </a-menu>
        </a-layout-sider>
        <a-layout>
            <a-layout-header>
                <div style="display: flex; justify-content: space-between;margin: 0 15px;padding: 10px 0;">
                    <a-button type="text" @click="onCollapse">
                        <!-- <IconCaretRight v-if="collapsed" /> -->
                        <!-- <IconCaretLeft v-else /> -->
                        <IconMenuUnfold v-if="collapsed" />
                        <IconMenuFold v-else />
                    </a-button>
                    <a-dropdown>
                        <a-button type="text">
                            {{username}}
                            <icon-down />
                        </a-button>
                        <template #content>
                            <a-doption @click="logout">登出</a-doption>
                            <a-doption>个人信息</a-doption>
                        </template>
                    </a-dropdown>
                </div>
            </a-layout-header>
            <a-layout>
                <a-layout-content style="padding: 10px 20px;">
                    <!-- Content -->
                    <router-view></router-view>
                </a-layout-content>

            </a-layout>
        </a-layout>
    </a-layout>
</template>
<script>
    import { defineComponent, ref, onMounted } from 'vue';
    import { useRouter } from 'vue-router';
    import { Message } from '@arco-design/web-vue';
    import {
        IconMenuFold,
        IconDashboard,
        IconFileVideo,
        IconFile,
        IconCloudDownload,
        IconDown,

    } from '@arco-design/web-vue/es/icon';
    import { logout as logoutApi } from '../../api/user';

    export default defineComponent({
        components: {
            IconMenuFold,
            IconDashboard,
            IconFileVideo,
            IconFile,
            IconCloudDownload,
            IconDown,
        },
        setup() {
            const router = useRouter();
            const collapsed = ref(false);
            const username = ref('');


            const onCollapse = () => {
                collapsed.value = !collapsed.value;
            };

            const onClickMenuItem = (key) => {
                router.push(key);
            };


            const logout = () => {
                logoutApi().then((res) => {
                    if (res.code != 200) {
                        Message.error('操作失败！');
                        return;
                    }

                    // window.sessionStorage.removeItem('token');
                    // window.sessionStorage.removeItem('username');
                    window.sessionStorage.clear();
                    Message.success('已退出登录！');
                    router.push('/login');
                }).catch((err) => {
                    console.log(err);
                });
            };


            // 挂载完成
            onMounted(() => {
                username.value = window.sessionStorage.getItem('username') || '未知';
            });

            return {
                collapsed,
                username,
                onCollapse,
                onClickMenuItem,
                logout
            }
        },

    });
</script>
<style scoped>
    .layout-admin {
        height: 100%;
        background: var(--color-fill-2);
        /* border: 1px solid var(--color-border); */
    }

    .layout-admin :deep(.arco-layout-sider) .logo {
        height: 32px;
        margin: 12px 8px;
        background: rgba(255, 255, 255, 0.2);
    }

    .layout-admin :deep(.arco-layout-sider-light) .logo {
        background: var(--color-fill-2);
    }

    .layout-admin :deep(.arco-layout-header) {
        /* height: 64px; */
        line-height: 64px;
        background: var(--color-bg-3);
    }


    .layout-admin :deep(.arco-layout-content) {
        /* color: var(--color-text-2); */
        font-weight: 400;
        font-size: 14px;
        background: var(--color-bg-3);
    }

    .layout-admin :deep(.arco-layout-content) {
        display: flex;
        flex-direction: column;
        /* justify-content: center; */
        /* color: var(--color-white); */
        font-size: 16px;
        font-stretch: condensed;
        /* text-align: center; */
    }
</style>